<template>
	<view class="flex flex-col">
		<NavBarVue title="人工解读"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="">
					<view class="box-artificial w-full relative">
						<image class="w-full" src="/static/test/bg_artificial.png" mode="widthFix"></image>
						<image class="absolute w-full" src="/static/test/bg_blue.png" mode="widthFix"></image>
						<image class="absolute w-full" src="/static/test/bg_red.png" mode="widthFix"></image>
						<view class="btn_expert" @click="handleClickStep1"></view>
						<view class="btn_speed" @click="handleClickStep2"></view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"

	const describe = ref('')

	onLoad(option => {
		describe.value = option.describe
	})
	const handleClickStep1 = () => {
		uni.navigateTo({
			url: `/pages/test/testQuickExpert?describe=${describe.value}`
		})
	}
	const handleClickStep2 = () => {
		uni.navigateTo({
			url: `/pages/test/testQuickSpeed?describe=${describe.value}`
		})
	}
</script>

<style lang="scss" scoped>
	.box-artificial {
		.absolute {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9;

			>.absolute {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
			}
		}

		.btn_expert {
			position: absolute;
			top: 480rpx;
			left: 36rpx;
			width: 390rpx;
			height: 100rpx;
			z-index: 11;
		}

		.btn_speed {
			position: absolute;
			bottom: 450rpx;
			right: 26rpx;
			width: 390rpx;
			height: 110rpx;
			z-index: 11;
		}
	}
</style>